<!DOCTYPE html>
<html>

<head>
    <title>SVG Demo 08</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            float: left;
        }
    </style>
</head>

<body>
    <h1>Demo08：描述元素 & 文字元素 & 字体元素</h1>
    <h2>desc、metadata、title & text、altGlyph、textPath、tref、tspan & font、font-face、font-face-format、font-face-name、font-face-src、font-face-uri</h2>
    <ul>
        <li>Desc：desc、metadata、title</li>
        <li>Text：text、altGlyph、textPath、tref、tspan</li>
        <li>Font：font、font-face、font-face-format、font-face-name、font-face-src、font-face-uri</li>
    </ul>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="p1" x="0" y="0" width="20" height="20"
                    patternUnits="userSpaceOnUse">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
                <pattern id="p2" x="10" y="10" width="20" height="20"
                    patternUnits="userSpaceOnUse">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
                <pattern id="p3" x="0" y="0" width="25" height="25"
                    patternUnits="userSpaceOnUse">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
                <pattern id="p4" x="0" y="0" width="20" height="20"
                    patternUnits="objectBoundingBox">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
                <pattern id="p5" x="0" y="0" width="0.2" height="0.2"
                    patternUnits="objectBoundingBox">
                        <circle cx="10" cy="10" r="10" stroke="none" fill="#393" />
                </pattern>
            </defs>
            <rect x="0" y="0" width="120" height="120" fill="url(#p1)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="0" y="0" width="120" height="120" fill="url(#p2)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="0" y="0" width="120" height="120" fill="url(#p3)"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#p4)" stroke="red" stroke-width="1"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="url(#p5)" stroke="red" stroke-width="1"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" fill="red" stroke="url(#p1)" stroke-width="20"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" fill="red" stroke="url(#p2)" stroke-width="20"></rect>
        </svg>
    </div>

</body>

</html>